*{
     margin: 0;
     padding: 0;
     list-style: none;
     text-decoration: none;
     box-sizing: border-box;
}

body{
     background-color: #f3f3f3;
     // overflow: hidden;
    
}
#cbBars{
     display: none;
}


.wrapper
{
     input:checked{
          &~ .main{
               left: 200px;
          }
          &~ .sidebar ul{
               width: 200px;
               li{
                    &:first-child a{
                         flex-direction: row;
                         justify-content: flex-start;
                         span{
                              display: block;
                         }
                    } 
                    a{
                         flex-direction: row;
                         justify-content: flex-start;
                         i{
                              margin: 0 15px 0 30px;
                         }
                    }
               }
          }
     }   

     .main{    
          position: absolute;
          top: 0;
          left: 70px;
          right: 0;
          font-size: 30px;
          color: #5a738e;
          height: 50px;
          background-color: #eee;
          padding-left: 20px;
          border: 1px solid #ddd;
          transition: all .5s ease;
          .bars{
               cursor: pointer;
          }
     }
     .sidebar{                            
          ul{
               list-style: none;
               width:70px;
               height: 100vh;
               background-color: #2a3f54;
               transition: all .5s ease;
               li{
                    height: 70px;
                    &:first-child a{
                         display: flex;
                         justify-content: center;
                         align-items: center;
                         padding: 0 15px;
                         img{
                              width: 50px;
                              height: 50px;
                              border-radius: 50%;
                              // padding: 5px;
                         }
                         span{
                              color: #fff;
                              white-space:nowrap;
                              padding-left: 10px;
                              display: none;
                         }
                    }
                    a{
                         display: flex;
                         align-items: center;
                         justify-content: center;
                         flex-direction: column;
                         width: 100%;
                         height: 100%;
                         color: #ddd;
                         text-decoration: none;
                         cursor: pointer;
                         transition: all .5s ease;
                         i{
                              font-size: 25px;
                         }
                         span{
                              font-size: 12px;
                              white-space: nowrap;
                         }
                         &:hover,&.active{
                              color: #fff;
                              background-color: #35495d;
                         }
                    }
               }
          }
         
     }

}
